<template>
	<view>
		<!-- 确认订单商品卡片 -->
		<view class="padding-lr-sm " v-if="goods && goods.length >0">
			<view class="goods-list " v-for="(g,index) in goods" :key="g.index">
				<view class="shop-name">{{g.shopName}}</view>
				<view class="flex justify-start align-center margin-left-xs">
					<view class="flex align-center justify-center" style="height: 200rpx;" @tap="onSel(index, g)">
						<checkbox :checked="g.checked" :class="{ checked: g.checked }" class="goods-radio round orange">
						</checkbox>
					</view>
					<view class="goods-card">
						<vc-good-card :detail="g" :sku="g.price"></vc-good-card>
					</view>
				</view>
				<view class="action-box b-t" >
					<button class="action-btn" @click="cancelStoreCart(g)">取消</button>
				</view>
			</view>
		</view>
		<view v-else>
			<no-data-page></no-data-page>
		</view>
		<view class="foot_box flex justify-between align-center">
			<view class="all-money">
				<text>合计：</text>
				<text class="price">￥{{ totalFee || '0.00' }}</text>
			</view>
			<button class="cu-btn sub-btn bg-gradual-orange margin-left" @click="_toGoodsConfirm()">
				结算
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getStoreCart,
		deleteStoreCart
	} from '@/api/order/orderApi.js';
	import noDataPage from '@/components/no-data-page/no-data-page.vue'
	export default {
		name: "buyCart",
		data() {
			return {
				goods: [],
				totalFee: 0,
				isSubOrder: false,
			};
		},
		components: {
			noDataPage
		},
		methods: {
			_loadStoreCart: function(_shopId) {
				let _that = this;
				getStoreCart({
					page: 1,
					row: 50,
				}).then(_data => {
					_data.data.forEach(_d=>{
						_d.payPrice = _d.price;
						_d.goodsNum = _d.cartNum;
					})
					_that.goods = _data.data;
				})
			},
			onSel: function(index, gCheck) {
				let that = this;
				that.goods[index].checked = that.goods[index].checked ? false : true;
				let totalFee = 0.0;
				that.goods.forEach(item => {
					if (item.checked == true) {
						totalFee = parseFloat(totalFee) + parseFloat(item.price) * parseFloat(item.cartNum);
					}
				})
				that.totalFee = totalFee.toFixed(2);
			},
			_toGoodsConfirm: function() {
				let _payGoods = [];
				this.goods.forEach(item => {
					if (item.checked == true) {
						_payGoods.push(item);
					}
				});
				if (_payGoods.length < 1) {
					uni.showToast({
						icon: 'none',
						title: '未选择商品'
					});
					return;
				}
				let _shopId = _payGoods[0].shopId;
				let _oneShopGoods = true;
				_payGoods.forEach(_g => {
					if (_shopId != _g.shopId) {
						_oneShopGoods = false;
					}
				});
				if (!_oneShopGoods) {
					uni.showToast({
						icon: 'none',
						title: '必须同店铺一起支付'
					});
					return;
				}
				let _productId= '';
				let _valueId = '';
				let _goodsNum = '';
				let _cartId = '';
				_payGoods.forEach(_g => {
					_productId +=(_g.productId+',');
					_valueId += (_g.valueId+',');
					_goodsNum += (_g.goodsNum+',');
					_cartId += (_g.cartId+',');
				});
				
				uni.navigateTo({
					url:'/pages/goods/goodsConfirm?productId='+_productId+'&shopId='+_shopId+'&valueId='+_valueId+'&goodsNum='+_goodsNum+'&cartId='+_cartId
				})
			},
			cancelStoreCart:function(_cart){
				let _that = this;
				deleteStoreCart({
					cartId:_cart.cartId,
					shopId:_cart.shopId
				}).then((data)=>{
					uni.showToast({
						icon:'none',
						title:data.msg
					});
					if(data.code == 0){
						_that._loadStoreCart();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods-list {
		background: #fff;
		position: relative;
		margin-top: 20rpx;
		padding-top:20upx;
		border-radius: 10upx;
		.shop-name{
			margin-left:20upx;
			color: #777;
		}

		/deep/ .goods-title {
			width: 460rpx !important;
		}

		.goods-card {
			padding: 20rpx;
		}

		.goods-price {
			font-size: 30rpx;
			font-weight: 500;
			width: 480rpx;

			.goods-num {
				font-size: 28rpx;
				color: #c4c4c4;
			}
		}
	}

	.foot_box {
		height: 100rpx;
		padding: 0 25rpx;
		justify-content: flex-end;
		background-color: #fff;
		border-top: 0.5px solid #eeeeee;
		width: 100%;
		position: fixed;
		bottom: 120upx;
		z-index: 999;



		.all-money {
			margin: 0 20rpx 0 20rpx;

			.price {
				color: #e1212b;
			}
		}

		.sub-btn {
			width: 210rpx;
			height: 70rpx;
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			border-radius: 35rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
	.action-box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 80upx;
		position: relative;
		padding-right: 30upx;
	}
	
	.action-btn {
		width: 120upx;
		height: 50upx;
		margin: 0;
		margin-left: 24upx;
		padding: 0;
		text-align: center;
		line-height: 50upx;
		font-size: 26upx;
		color: #333333;
		background: #fff;
		border-radius: 100px;
	
		&:after {
			border-radius: 100px;
		}
	
		&.recom {
			background: #fff9f9;
			color: #fa436a;
	
			&:after {
				border-color: #f7bcc8;
			}
		}
	}
</style>